<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from 'vue-router'
import { Home } from "@/api";
import { useNewMenusStore } from '@/stores/new_menus';
import { useExpandStore } from '@/stores/expand'

// 初始化，store实例对象
let menu = useNewMenusStore()
let expand = useExpandStore();
let route = useRoute()

// 获取logo
let url = ref('')
let logo = async () => {
    let { status, msg, data } = await Home.logo();
    if (status === 200) {
        url.value = data.logo_square;
    } else {
        ElNotification.error(msg);
    }
}

// 定义图标列表
let menusIcon = ref([
    'HomeFilled', 'UserFilled', 'ShoppingCart', 'GoodsFilled', 'Promotion', 'DataLine', 'ChatSquare',
    'Coin', 'Notebook', 'Van', 'SetUp', 'Tools', 'HelpFilled'
])

onMounted(() => {
    menu.obtain();
    logo();
})

</script>

<template>
    <div class="menu_box" style="display: flex;">
        <el-menu :default-active="route.path" unique-opened router active-text-color="#1890ff" background-color="#282c34"
            class="el-menu-vertical-demo menu_1st" text-color="#fff">
            <img class="logo" src="http://www.shop.net/statics/system_images/admin_logo_small.png" alt="">
            <template v-for="(item, index) in menu.menuList">
                <el-menu-item
                    :class="{ active_1st: (item.path == menu.cur_menu_parent.path || item.title == menu.cur_menu.menu_name) }"
                    class="el-menu-item" :index="(index == 0 ? item.path : item.children[0]?.path)">
                    <el-icon>
                        <component :is="menusIcon[index]" />
                    </el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
        <el-menu v-show="menu.cur_menu_2nd" :default-active="route.path"
            :style="{ 'width': (expand.isExpand ? '150px' : '0') }" router background-color="#fff"
            class="el-menu-vertical-demo menu_2nd" text-color="#282c34" active-text-color="#1890ff">
            <div class="p_name">
                <b>
                    {{ menu.cur_menu_parent.title }}
                </b>
            </div>
            <template v-for="(item, index) in menu.cur_menu_2nd">
                <el-menu-item :class="{ active_2nd: item.path == menu.cur_menu.path }" class="el-menu-item menu_item_2nd"
                    :index="item.path">
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<style lang="less" scoped>
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item {
    padding-left: 10px;
}

.menu_1st {
    width: 80px;
    height: 100vh;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
}

.menu_2nd {
    transition: all 0.3s;
    box-shadow: 1px 0 5px #dcd2d2;
    margin-right: 3px;

    .p_name {
        color: #606266;
        padding-left: 10px;
        border-bottom: 1px solid #dcdfe6;

        b {
            line-height: 50px;
        }
    }

}


.el-menu-vertical-demo {

    .active_1st {
        color: #fff;
        background-color: #1890ff;
    }

    .el-menu-item.active_1st:hover {
        color: #fff;
    }

    .active_2nd {
        color: #1890ff;
        background-color: #f0faff;
    }

    .logo {
        width: 50px;
        height: 50px;
        background-color: #282c34;
    }

    .el-menu-item:hover {
        color: #1890ff;
    }

    .el-menu-item.menu_item_2nd:hover {
        background-color: #fff;
    }

}

/* scroll-view 不显示滚动条 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}
</style>